<template>
    <div>
        <el-button-group v-if="allowed([0])">
            <el-button size="mini" type="primary" @click="handFormUserEdit">新增</el-button>
        </el-button-group>
        <el-divider></el-divider>
        <el-table :data="tableData.rows" border class="w-80%">
            <el-table-column label="排序" width="220">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="mini" type="info" @click="deltaSort(
                            {
                                project_id: scope.row.project_id,
                                project_owner_id: scope.row.project_owner_id,
                                project_owner_form_id: scope.row.project_owner_form_id,
                                user_id: scope.row.user_id

                            }, scope.row.sort, -1)"><i class="fa fa-arrow-up"></i> </el-button>
                        <el-button size="mini" type="warning" @click="deltaSort(
                            {
                                project_id: scope.row.project_id,
                                project_owner_id: scope.row.project_owner_id,
                                project_owner_form_id: scope.row.project_owner_form_id,
                                user_id: scope.row.user_id

                            }
                            , scope.row.sort, 1)"><i class="fa fa-arrow-down" aria-hidden="true"></i></el-button>
                    </el-button-group>
                </template>
            </el-table-column>
            <el-table-column label="顺序" width="50">
                <template slot-scope="scope">
                    <el-tag type="info">{{ scope.row.sort + 1 }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="user_name" label="人员" width="100">
            </el-table-column>
            <el-table-column v-if="allowed([0])" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handFormUserRemove(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="handPage" layout="prev, pager, next" :total="tableData.count"
            :page-size="tableData.offset">
        </el-pagination>
    </div>
</template>

<script>
import { FormDialog } from '@formily/element'
import { InputForm } from './InputForm';
import { BaseApi } from '../../../../../api/common/base-api';
import { sharedConfig } from '../../../../shared/BaseCurd';
const api = new BaseApi({ prefix: "/eva-project-owner-form-user" });
const entity = {
    project_id: "",
    project_owner_id: "",
    project_owner_form_id: "",
    user_id: "",
    user_name: "",
    user_type: 0,
}
export default {
    name: "EvaProjectOwnerFormUserPager",
    props: ["project_id", "project_owner_id", "project_owner_form_id", "user_type"],
    async mounted() {
        this.loadPager({ page: 1 });
    },
    methods: {
        ...sharedConfig.methods,
        async loadPager({ page }) {
            const data = await api.findPager({
                page, where: {
                    project_id: this.project_id,
                    project_owner_id: this.project_owner_id,
                    project_owner_form_id: this.project_owner_form_id,
                    user_type: this.user_type
                }, order: [['sort']]
            });
            this.tableData = { ...data.data };
        },
        handFormUserEdit(row) {
            FormDialog('编辑主体-测评表-人员', InputForm)
                .forOpen((payload, next) => {
                    const raw = (row instanceof PointerEvent) ? entity : row;
                    raw.project_id = this.project_id;
                    raw.project_owner_id = this.project_owner_id;
                    raw.project_owner_form_id = this.project_owner_form_id;
                    raw.user_type = this.user_type;
                    next({
                        initialValues: { ...raw },
                    })
                })
                .forConfirm((payload, next) => {
                    next(payload)
                })
                .forCancel((payload, next) => {
                    next(payload)
                })
                .open()
                .then(async (values) => {
                    const users = values.user_info;
                    if (!users || users.length === 0) {
                        return;
                    }
                    const records = users.map(u => {
                        const iu = u.split("^");
                        return {
                            project_id: values.project_id,
                            project_owner_id: values.project_owner_id,
                            project_owner_form_id: values.project_owner_form_id,
                            user_id: iu[0],
                            user_name: iu[1],
                            user_type: values.user_type,
                        };
                    });
                    await this._remove({
                        api,
                        where: {
                            project_id: values.project_id,
                            project_owner_id: values.project_owner_id,
                            project_owner_form_id: values.project_owner_form_id
                        }
                    })
                    await this._saveBatch({ api, records })
                    await this.loadPager({ page: 1 });
                })
                .catch(console.error)
        },
        handFormUserRemove(row) {
            this.$confirm("确定要删除?", "系统提示").then(async () => {
                await this._remove({
                    api, where: {
                        project_id: row.project_id,
                        project_owner_id: this.project_owner_id,
                        project_owner_form_id: row.project_owner_form_id,
                        user_id: row.user_id
                    }
                });
                await this.loadPager({ page: 1 });
            }).catch(console.error);

        },
        async deltaSort(id, sort, delta) {
            await this.sort(api, id, sort, delta)
        }
    },
    data() {
        return {
            tableData: {
                count: 0,
                offset: 10,
                page: 1,
                rows: [],
            }
        }
    },
    watch: {
        project_owner_form_id: function (newValue, oldValue) {
            if (newValue !== oldValue) {
                //console.log(this);
                this.loadPager({ page: 1 });
            }
        }
    }
}
</script>